<template>
	<view v-if="details.goods_name" class="rootElement">
		<!-- 轮播图 -->
		<swiper indicator-dots circular autoplay interval="3000" duration="1000">
			<swiper-item v-for="(item, index) in details.pics" :key="item.pics_id">
				<image :src="item.pics_big" @click="previewImage(index)" />
			</swiper-item>
		</swiper>

		<!-- 商品信息 -->
		<view class="infoContainer">
			<!-- 商品价格 -->
			<view class="goodsPrice"> <text>￥</text>{{ goodsPrice }} </view>
			<!-- 商品标题与收藏 -->
			<view class="goodsTitle">
				<view class="title"> {{ details.goods_name }} </view>
				<view class="collect"> <uni-icons type="star" size="30" color="gray"></uni-icons>收藏 </view>
			</view>
			<!-- 商品状态 -->
			<view class="goodsStatus">快递：免运费 </view>
		</view>

		<!-- 分隔线 -->
		<view class="separationLine"> ——<text>商品详情</text>—— </view>

		<!-- 商品详情 -->
		<view class="detailsContainer"> <rich-text :nodes="details.goods_introduce"></rich-text> </view>

		<!-- 商品导航 -->
		<view class=".goodsNavContainer">
			<uni-goods-nav
				:options="options"
				:buttonGroup="buttonGroup"
				fill
				@click="optionsClick"
				@buttonClick="buttonsClick"
			></uni-goods-nav>
		</view>
	</view>
</template>

<script>
import { mapMutations, mapGetters } from 'vuex'
export default {
	data() {
		return {
			details: {},
			options: [
				{
					icon: 'shop',
					text: '店铺'
				},
				{
					icon: 'cart',
					text: '购物车',
					info: 0,
					infoBackgroundColor: '#c00000'
				}
			],
			buttonGroup: [
				{
					text: '加入购物车',
					backgroundColor: '#c00000',
					color: '#fff'
				},
				{
					text: '立即购买',
					backgroundColor: '#ffa200',
					color: '#fff'
				}
			]
		}
	},

	onLoad(options) {
		// 调用商品详情数据请求函数并传入请求参数
		this.getGoodsDetails(options.goods_id)
	},

	methods: {
		// 定义商品详情数据请求函数
		async getGoodsDetails(goodsID) {
			const { data } = await uni.$http.get('/api/public/v1/goods/detail?goods_id=' + goodsID)
			// 请求成功则赋值，否则提示失败
			if (data.meta.status === 200) {
				// 通过正则处理商品详情图片底部间隙
				data.message.goods_introduce = data.message.goods_introduce
					.replace(/<img /g, '<img style="display:block;" ')
					.replace(/webp/g, 'jpg')
				// 处理完毕再赋值
				this.details = data.message
			} else {
				uni.$showMsg()
			}
		},

		// 定义轮播图点击预览事件回调
		previewImage(index) {
			uni.previewImage({
				current: index,
				urls: this.details.pics.map(item => item.pics_big)
			})
		},

		// 定义商品导航组件的click事件回调
		optionsClick(e) {
			if (e.content.text === '购物车') {
				uni.switchTab({
					url: '/pages/cart/cart'
				})
			}
		},

		// 将m_cart模块的mutation映射为页面的方法
		...mapMutations('m_cart', ['addToCart']),

		// 定义商品导航组件的buttnClick事件回调
		buttonsClick(e) {
			if (e.content.text === '加入购物车') {
				// 组织当前页面商品信息对象
				const goodsObj = {
					goods_id: this.details.goods_id,
					goods_name: this.details.goods_name,
					goods_price: this.details.goods_price,
					goods_count: 1,
					goods_small_logo: this.details.goods_small_logo,
					goods_state: true
				}
				// 添加到购物车Vuex模块中
				this.addToCart(goodsObj)
				// 提示用户加入成功
				uni.$showMsg('加入成功！', 1500, 'success')
			}
		}
	},

	computed: {
		// 让商品价格显示小数点后两位
		goodsPrice() {
			return Number(this.details.goods_price).toFixed(2)
		},
		// 将m_cart模块的getter映射为页面的计算属性
		...mapGetters('m_cart', ['total'])
	},

	watch: {
		// 侦听来源于m_cart模块的商品总数变化
		total: {
			handler(newVal) {
				const match = this.options.find(item => item.text === '购物车')
				if (match) return (match.info = newVal)
			},
			// 页面首次加载时立即执行一次侦听器
			immediate: true
		}
	}
}
</script>

<style lang="scss">
// 轮播图
swiper {
	height: 750rpx;
	image {
		width: 100%;
		height: 100%;
	}
}

//商品信息
.infoContainer {
	margin: 10px;
	padding: 10px;
	background-color: #fff;
	border-radius: 10px;
	// 商品价格
	.goodsPrice {
		color: #c00000;
		font-size: 24px;
		text {
			font-size: 15px;
		}
	}
	// 商品标题与收藏
	.goodsTitle {
		padding: 8px 0;
		display: flex;
		justify-content: space-between;

		.title {
		}
		.collect {
			padding-left: 10px;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			font-size: 12px;
			color: gray;
			border-left: 1px solid #efefef;
		}
	}
	// 商品状态
	.goodsStatus {
		font-size: 14px;
		color: gray;
	}
}

// 分隔线
.separationLine {
	margin-bottom: 10px;
	text-align: center;
	color: gray;
	text {
		padding: 0 10px;
	}
}

// 商品导航
.goodsNavContainer {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
}

// 页面根元素
.rootElement {
	// 设置下padding以应对脱标的商品导航栏
	padding-bottom: 50px;
}
</style>
